<!DOCTYPE html>
<html>
	<head>
		<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
		<META HTTP-EQUIV="expires" CONTENT="0">
		<meta charset="utf-8">
    	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    	<title>地铁票价</title>
    	<style>
    		*{margin:0;padding:0;border:0;}
    		div{width:100%}
    		img{display:block;width:100%;}
    		
    		.rotate{animation:rot 2s linear infinite;-webkit-animation:rot 2s linear infinite;}
		@keyframes rot{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(180deg);}
			100%{transform:rotate(360deg);}
		}
		@-webkit-keyframes rot{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(180deg);}
			100%{transform:rotate(360deg);}
		}
    	</style>
	</head>
	<body>
		<img class="rotate" src="./img/button.png" id="cls" style="display:block;width:10%;position:absolute;z-index: 60;font-weight:700;right:10px;top:10px"/>
		<div><img src="./img/page02/page02_02.jpg?index=23" alt="地铁票价" /></div>
		<div><img src="./img/page02/page02_03.jpg?index=23" alt="地铁票价" /></div>
		<div><img src="./img/page02/page02_04.jpg?index=23" alt="地铁票价" /></div>
		<div><img src="./img/page02/page02_06.jpg?index=23" alt="地铁票价" /></div>
		<audio id="audio" src="./music/Multex.mp3" autoplay loop preload></audio>
		<script>
			var audio = document.getElementById('audio');
			audio.canplay = function(){audioAutoPlay('audio');};
			audioAutoPlay('audio');
			
			function audioAutoPlay(id){
			    var audio = document.getElementById(id);
			    audio.play();
			    document.addEventListener("WeixinJSBridgeReady", function () {
			            audio.play();
			    }, false);
			}
		</script>
		<script>
		;(function(){
			var au = document.getElementById('audio');
			var cls = document.getElementById('cls');
			var flg = true;
			cls.onclick = function(){
				if(flg){
					au.pause();
					cls.className = "";
					flg = false;
				}else{
					au.play();
					cls.className = "rotate";
					flg=true;
				}

			};
		})();
	</script>
	</body>
</html>
